import { createRef, useEffect, useState } from 'react'
import styles from './login.module.css'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { UserOutlined, KeyOutlined, LockOutlined } from '@ant-design/icons';
import Captcha from '../component/captcha';
import { Login2 } from '../request/instance';
import { useNavigate } from 'react-router-dom';
import { setCookie } from '../components/RememberPassword';
import { getCookie } from '../components/RememberPassword';
import { removeCookie } from '../components/RememberPassword';

export default function Login() {
    // 判断当前登陆方式（密码登录/手机号登陆）
    const [loginType, setLoginType] = useState('password')
    // 用户输入的验证码
    const [inputYZM, setInputYZM] = useState('')
    // 路由跳转
    const nav = useNavigate()
    // 是否记住密码
    const [isRememberPassword, setIsRememberPassword] = useState(false)

    // 表单验证成功
    const onFinish = (values) => {
        // console.log('Success:', values);
        if (inputYZM == values.verificationCcode) {
            Login2(values).then((res) => {

                if (res.data.code == 200) {
                    // console.log(res.data.data);
                    // console.log(res.data.data.rid);

                    message.success(res.data.message);
                    localStorage.setItem('accessToken', res.data.accessToken)
                    localStorage.setItem('refreshToken', res.data.refreshToken)
                    localStorage.setItem('rid', res.data.data.rid)
                    localStorage.setItem('imgSrc', res.data.data.imgSrc)
                    localStorage.setItem("admin", res.data.data.userName)
                    if (isRememberPassword) {
                        setCookie('username', res.data.data.userName, 1)
                        setCookie('password', res.data.data.passWord, 1)
                    } else {
                        removeCookie('username')
                        removeCookie('password')
                    }
                    nav('/shouye')
                } else if (res.data.code == 400) {
                    message.error(res.data.message)
                } else {
                    message.error(res.data.message)
                }
            })
        } else {
            message.error('验证码错误');
        }
    };
    //表单验证失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const [form] = Form.useForm()
    // 登录
    const login = (val) => {
        // console.log(val);
        setInputYZM(val)
    }
    const login1 = () => {
        login
    }
    useEffect(() => {
        if (getCookie('username') != '' && getCookie('password') != '') {
            form.setFieldsValue({ "username": getCookie('username'), "password": getCookie('password') })
        }
    }, [])
    return <>
        {/* 背景图盒子 */}
        <div className={styles.box}>
            {/* 登录区域盒子 */}
            <div className={styles.box1}>
                {/* 登录文字 */}
                <h3 className={styles.h3}>登录</h3>
                {/* 表单区域 */}
                <div className={styles.box4}>
                    <Form
                        name="basic"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '登录账号不能为空！',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined />} className={styles.input} placeholder='登陆账号' />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '密码不能为空！',
                                },
                            ]}
                        >
                            <Input className={styles.input} type='password' prefix={<LockOutlined />} placeholder='登陆密码' />
                        </Form.Item>
                        <Form.Item
                            name="verificationCcode"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                            ]}
                            style={{ display: 'Flex' }}
                        >
                            <Input className={styles.input} prefix={<KeyOutlined />} placeholder='图形验证码' />
                        </Form.Item>
                        <Captcha login={login}></Captcha>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" className={styles.button} onClick={login1}>
                                登录
                            </Button>
                        </Form.Item>
                        <Form.Item name="remember" valuePropName="checked" label={null} className={styles.form_item}>
                            <div>
                                <Checkbox checked={isRememberPassword} onChange={(e) => { setIsRememberPassword(e.target.checked) }}>记住密码</Checkbox>
                                <span className={styles.span} onClick={() => nav('/resetPassword')}>忘记密码</span>
                            </div>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>

    </>
}